<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3</title>
        <style>

            table {
                border-collapse: collapse;
            }

            tr td,
            tr th {
                border: 1px solid green;
                width: 150px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="name" placeholder="姓名">
            <input type="text" v-model="sex" placeholder="性别">
            <input type="text" v-model="tel" placeholder="电话">
            <input type="text" v-model="age" placeholder="年龄">
            <input type="button" value="添加" @click="addStudent">
            <div><input type="text" placeholder="请输入用户名查询" @keyup.enter="check" v-model="name1"></div>
            <table>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th @click="sortAge">年龄
                        <span v-show="Lift">{{arrow}}</span>
                    </th>
                </tr>
                <tr v-for="i in students">
                    <td>{{i.id}}</td>
                    <td>{{i.name}}</td>
                    <td>{{i.sex}}</td>
                    <td>{{i.tel}}</td>
                    <td>{{i.age}}</td>
                </tr>
            </table>
        </div>
        <script src="../js/vue.js"></script>
        <script>

            var app = new Vue({
                el: "#app",
                data: {
                    arrow: '↓',
                    Lift: false,
                    name: "",
                    name1: "",
                    sex: "",
                    tel: "",
                    age: "",
                    students: [
                        {id: 1, name: "大春", sex: "男", tel: "17674859874", age: 20},
                        {id: 2, name: "大熊", sex: "男", tel: "17873254327", age: 16},
                        {id: 3, name: "小甜甜", sex: "女", tel: "15843893245", age: 28},
                        {id: 4, name: "小花", sex: "女", tel: "13453267326", age: 18},
                        {id: 5, name: "测试", sex: "男", tel: "13832356743", age: 23},
                        {id: 6, name: "山山", sex: "男", tel: "17634215743", age: 25}
                    ],
                    //原数组备份
                    studentsArr: [
                        {id: 1, name: "大春", sex: "男", tel: "17674859874", age: 20},
                        {id: 2, name: "大熊", sex: "男", tel: "17873254327", age: 16},
                        {id: 3, name: "小甜甜", sex: "女", tel: "15843893245", age: 28},
                        {id: 4, name: "小花", sex: "女", tel: "13453267326", age: 18},
                        {id: 5, name: "测试", sex: "男", tel: "13832356743", age: 23},
                        {id: 6, name: "山山", sex: "男", tel: "17634215743", age: 25}
                    ]
                },
                methods: {
                    addStudent() {
                        if (this.name !== '' && this.sex !== '' && this.tel !== '' && this.age !== '') {
                            let newStudent = {
                                id: this.studentsArr.length + 1,
                                name: this.name,
                                sex: this.sex,
                                tel: this.tel,
                                age: this.age
                            }
                            this.studentsArr.push(newStudent);
                            this.students = this.studentsArr;
                            this.name = this.sex = this.tel = this.age = '';
                        }
                    },
                    sortAge() {
                        this.Lift = true;
                        if (this.arrow === '↓') {
                            this.arrow = '↑';
                            /*this.students.sort(riseCompare("age"));*/
                            this.students.sort((a, b) => {
                                return a.age - b.age;
                            })
                        } else {
                            this.arrow = '↓';
                            this.students.sort(function (a, b) {
                                return b.age - a.age;
                            });
                        }
                    },
                    check() {
                        let reg = new RegExp(this.name1);
                        let newStudents = this.studentsArr.filter(user => reg.test(user.name));
                        console.log(newStudents);
                        //输入姓名并且找到 渲染找到的数组
                        if (newStudents.length !== 0 && this.name1 !== '') {
                            this.students = newStudents;
                            //没有输入字符回车查找 渲染原数组
                        } else if (this.name1==='') {
                            this.students = this.studentsArr;
                            //输入了字符并且没有查找到 渲染空数组
                        }else {
                            this.students = newStudents;
                        }
                    }
                }
            })
        </script>
    </body>
</html>